<template>
	<view class="content">
		<view class="cards" v-for="(item,index) in ongoingActivityList">
			<view class="card-name" style="display: flex;justify-content: space-between;">
				<text style="font-size: 31rpx;font-weight: bold;">【核心】{{item.activityName}}</text>
				<text class="main_color">
					<!-- {{item.type | statusFilter}} -->
					{{item.status}}
				</text>
			</view>
			<view style="margin: 20rpx 0;font-size: 28rpx;color: #000;">
				近{{item.clienteleCondition}}天未购买指定商品的客户可享受低价优惠
			</view>
			<view style="border: 1px solid #f4f4f4;padding: 17rpx 0;"></view>
			<view class="content-list">
				<view style="display: flex;align-items: center;">
					<view style="flex: 1;color: #999;">
						活动时间
					</view>
					<view style="flex: 3;">
						{{item.activityTime.slice(0, 10)}}-{{item.deadline.slice(0, 10)}}
					</view>
				</view>
				<view style="display: flex;margin-top: 16rpx;align-items: center;">
					<view style="flex: 1;color: #999;">
						活动商品
					</view>
					<!-- <view style="flex: 3;color: #1b61c9;"> -->
					<view class="main_color" style="flex: 3;" @click="openDataPopup(item.id)">
						共{{item.productQuantity}}件商品参与<uni-icons type="forward" size="15" color="#fe5c2d"></uni-icons>
					</view>
				</view>
			</view>
			<view class="footer-button" style="margin-top: 40rpx;">
				<view class="last_button" style="display: flex;justify-content: end;font-size: 24rpx;">
					<button style="margin-right:10px ; line-height: 57rpx;padding:0 30rpx;" class="plain_bgColor"
						plain="true" @click="toActiveDetails(item)">查看详情</button>
					<button v-if="tabIndex == 0" style="line-height: 57rpx;padding:0 30rpx;color: #fff;" class="bg_color"
						@click="addProducts(item)">添加商品</button>
				</view>
			</view>
		</view>
		
		<!-- 空状态 -->
		<view class='noCommodity' v-if="ongoingActivityList.length == 0 ">
			<view class='pictrue'>
				<image src='../static/noCollect.png'></image>
			</view>
			<text class="text-ccc" style="font-weight: bolder;">暂无信息</text>
		</view>
	</view>
</template>

<script>
	import {
		setThemeColor
	} from "../../../utils/setTheme.js";
	import {
		statusFilter
	} from "./filter.js";
	let app = getApp();
	export default {
		props: {
			// tab: {
			// 	type: [Object],
			// 	default: ''
			// },
			// parentId: {
			// 	type: String,
			// 	default: ''
			// },
			// bgColor: {
			// 	type: String,
			// 	default: 'blue'
			// },
			ongoingActivityList:{
				type:Array,
				default:null
			},
			tabIndex: {
				type: Number,
				default: ''
			},
		},
		data() {
			return {
				bgColor: '#ffffff',
				theme: app.globalData.theme,
				productList: [{
					name: '冻品尝鲜价04.14-04.30',
					type: 1, //1:活动中，2未开始，3已结束
					text: '近30天未购买指定商品的客户可享受低价优惠',
					time: '2024.4.17-2024.4.30',
					productNum: 2,
				},{
					name: '尝鲜价04.14-04.30',
					type: 3, //1:活动中，2未开始，3已结束
					text: '近30天未购买指定商品的客户可享受低价优惠',
					time: '2024.4.17-2024.4.30',
					productNum: 2,
				}],
				showUpDatePopup:false,
			}
		},
		onLoad() {
			this.bgColor = setThemeColor();
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
		},
		// 过滤器
		filters: {
			statusFilter // 活动状态
		},
		methods:{
			toActiveDetails(item) {
				this.$emit('toActiveDetails',item);
			},
			openDataPopup(activityId){
				// let ele = !this.showUpDatePopup;
				let emitData = {
					ele:!this.showUpDatePopup,
					id:activityId
				}
				this.$emit('openDataPopup',emitData);
			},
			addProducts(item){
				this.$emit('addProducts',item);
			}
		}
	}
</script>

<style scoped lang="scss">
	.main_color {
		@include main_color(theme);
	}

	.bg_color {
		@include main_bg_color(theme);
	}

	.plain_bgColor {
		@include main_color(theme);
		// @include main_bg_rgba_color(theme, 0.05);
		border: 1rpx solid $main-color-theme1;
	}

	.cards {
		border-radius: 20rpx;
		background-color: #fafafa;
		padding: 20rpx;
		margin-bottom: 20rpx;
	}
	
	.noCommodity {
		margin: 20% 0;
		align-items: center;
		text-align: center;
		justify-content: center;
	}
</style>